<template>
  <div class="personalHome-top-box" id="HeadBackPho">
    <div class="personalHome-top" id="abc">
      <div class="headContentBox">
        <div v-if="isMyself"  class="changeBackImg" id="changeBackImg">
          <a href="javascript:;"><div class="change" @click="changeHeadImg"><i class="iconfont icon-taifengzhuanhuan" :title="$t('userHome.head.skinTitle01')"></i></div></a>
          <a href="javascript:;"><div class="change" @click="changeBodyImg"><i class="iconfont icon-xuanzhuan" :title="$t('userHome.head.skinTitle02')"></i></div></a>
        </div>
        <div class="personalHome-top-left">
          <div class="personalHome-top-left-replace">
            <img :src=this.user.userHeadPortrait alt="" width="70px" class="personalHome-top-left-iocn">
          </div>

          <div class="personalHome-top-left-descr">
            <div>
              {{user.userNickname==""?user.userId:user.userNickname}}
              <i v-if="user.userGender=='男'"
                 class="iconfont icon-nan"
                 style="color: rgb(0, 125, 228); font-weight:bolder; position: absolute; top: -10px; margin-left: 3px"></i>
              <i v-else
                 class="iconfont icon-nv"
                 style="color: rgb(236, 65, 116); font-weight:bolder; position: absolute; top: -10px; margin-left: 3px"></i>
            </div>
            <div>
              {{user.userSign==""?$t('userHome.head.userSign'):user.userSign}}
            </div>
          </div>
        </div>
        <div v-if="!isMyself" class="personalHome-top-right">
          <a v-if="!isConcerned" href="javascript:;" :title="$t('userHome.head.attentionBtn')">
            <div @click="concerned" class="personalHome-top-right-guanzhu">
              <i class="iconfont icon-31guanzhudianpu" style="margin-right: 2px; font-weight:bolder"></i>
              {{$t('userHome.head.attentionBtn')}}
            </div>
          </a>
          <a v-else href="javascript:;" :title="$t('userHome.head.cancelAttentionBtn')">
            <div @click="cancelConcerned" class="personalHome-top-right-guanzhu">
              <i class="iconfont icon-31yiguanzhudianpu" style="margin-right: 2px; font-weight:bolder"></i>
              {{$t('userHome.head.cancelAttentionBtn')}}
            </div>
          </a>
          <router-link target="_blank" :to="{path:'/chat', query:{ userId : this.$route.query.userId }}" :title="$t('userHome.head.chatBtn')">
            <div class="personalHome-top-right-sixin">
              <i class="iconfont icon-sixin" style="margin-right: 2px; font-weight:bolder"></i>
              {{$t('userHome.head.chatBtn')}}
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    let rotate0 = -360
    let headPho = 1
    let rotate1 = -360
    let bodyPho = 1
    let changeHeadCount = 6
    let changeBodyCount = 6
    export default {
        name: "UserHead",
        data(){
            return{
                user:'',
                baseURL:'http://localhost:8081/user/queryByID/',
                baseURL2:'http://localhost:8081/userHomePage/whetherMyself/',
                baseURL3:'http://localhost:8081/userHomePage/whetherConcerned/',
                baseURL4:'http://localhost:8081/user/myselfID',
                baseURL5:'http://localhost:8081/userHomePage/concerned/',
                baseURL6:'http://localhost:8081/userHomePage/cancelConcerned/',
                baseURL7:'http://localhost:8081/userHomePage/changeHeadImg/',
                baseURL8:'http://localhost:8081/userHomePage/changeBodyImg/',
                myselfID:'',
                isMyself:true,
                isConcerned:true,
            }
        },
        mounted() {
            this.getUserInfo()
            this.whetherMyself()
            this.whetherConcerned()
            this.getMyselfId()
            window.addEventListener('scroll', this.scrollEvent,false)
        },
        methods:{
            getUserInfo(){
                this.axios.post(this.baseURL+this.$route.query.userId).then(res=>{
                    if (res.data == false){
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    } else {
                        this.user = res.data
                        // 更换背景图片
                        document.getElementById("HeadBackPho").style.background = "url(" + require("../../../assets/images/user/head-back/"+res.data.userBackImgHeadNumber+".png") + ") no-repeat"
                        document.getElementById("HeadBackPho").style.backgroundSize = "100% 100%"
                        document.body.style.background = "url(" + require("../../../assets/images/user/body-back/"+res.data.userBackImgBodyNumber+".png") + ")"
                        document.body.style.backgroundAttachment = "fixed"
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            whetherMyself(){
                this.axios.post(this.baseURL2+this.$route.query.userId).then(res=>{
                    if (res.data == "error"){
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    } else {
                        this.isMyself = res.data
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            whetherConcerned(){
                this.axios.post(this.baseURL3+this.$route.query.userId).then(res=>{
                    if (res.data == "error"){
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    } else {
                        this.isConcerned = res.data
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getMyselfId(){
                this.axios.get(this.baseURL4).then(res=>{
                    if (res.data == false){
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    } else {
                        this.myselfID = res.data.userId
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            concerned(){
                this.axios.get(this.baseURL5+this.$route.query.userId).then(res=>{
                    if (res.data == true){
                        this.$message.success(this.$t('userHome.head.attentionSuccess'))
                        this.isConcerned = true
                    } else if(res.data==false) {
                        this.$message.warning(this.$t('userHome.head.attentionFail'))
                    } else{
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            cancelConcerned(){
                this.axios.get(this.baseURL6+this.$route.query.userId).then(res=>{
                    if (res.data == true){
                        this.$message.success(this.$t('userHome.head.cancelAttentionSuccess'))
                        this.isConcerned = false
                    } else if(res.data==false) {
                        this.$message.warning(this.$t('userHome.head.cancelAttentionFail'))
                    } else{
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            changeHeadImg:function () {
                document.getElementsByClassName("change")[0].style.transform="rotate("+rotate0+"deg)"
                rotate0 -= 360
                if (changeHeadCount == 0){
                    this.$message.warning(this.$t('userHome.head.BanMultipleExecute'))
                    return
                }else{
                    changeHeadCount--
                }
                if (headPho==this.user.userBackImgHeadNumber){
                    headPho++
                }
                this.axios.get(this.baseURL7+(headPho)%5).then(res=>{
                    if (res.data == true){
                        this.$message.success(this.$t('userHome.head.sinkChangeOk'))
                        document.getElementById("HeadBackPho").style.background = "url(" + require("../../../assets/images/user/head-back/"+(headPho%5)+".png") + ") no-repeat"
                        document.getElementById("HeadBackPho").style.backgroundSize = "100% 100%"
                        headPho++
                    } else if(res.data==false) {
                        this.$message.warning(this.$t('userHome.head.sinkChangeNo'))
                    } else{
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            changeBodyImg:function () {
                document.getElementsByClassName("change")[1].style.transform="rotate("+rotate1+"deg)"
                rotate1 -= 360
                if (changeBodyCount == 0){
                    this.$message.warning(this.$t('userHome.head.BanMultipleExecute'))
                    return
                }else{
                    changeBodyCount--
                }
                if (bodyPho==this.user.userBackImgBodyNumber){
                    bodyPho++
                }
                this.axios.get(this.baseURL8+(bodyPho%5)).then(res=>{
                    if (res.data == true){
                        this.$message.success(this.$t('userHome.head.sinkChangeOk'))
                        document.body.style.background = "url(" + require("../../../assets/images/user/body-back/"+(bodyPho%5)+".png") + ")"
                        document.body.style.backgroundAttachment = "fixed"
                        bodyPho++
                    } else if(res.data==false) {
                        this.$message.warning(this.$t('userHome.head.sinkChangeNo'))
                    } else{
                        this.$message.error(this.$t('userHome.head.serviceUnusual'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            scrollEvent(){
                let headBackPho = document.getElementById("HeadBackPho")
                let abc = document.getElementById("abc")
                let changeBackImg = document.getElementById("changeBackImg")
                let rightHig = document.getElementById("personalHome-bottom-right").offsetHeight // 获取高度
                let leftHig = document.getElementById("personalHome-bottom-left").offsetHeight
                let tianchong = document.getElementById("tianchong")
                if(rightHig>=leftHig){
                    tianchong.style.height = rightHig+"px"
                }else{
                    tianchong.style.height = leftHig+"px"
                }

                let heig = parseInt(window.scrollY);
                if (heig > 0) {
                    headBackPho.style.width="100%"
                    headBackPho.style.height="95px"
                    headBackPho.style.borderRadius="0px"
                    headBackPho.style.boxShadow="0 0  10px #1D1D1D"
                    abc.style.height="95px"
                    changeBackImg.style.top="5px"
                } else {
                    headBackPho.style.width="1150px"
                    headBackPho.style.height="150px"
                    headBackPho.style.borderRadius="3px"
                    headBackPho.style.boxShadow="0 0  10px transparent"
                    abc.style.height="150px"
                    changeBackImg.style.top="-30px"
                }
            },
        }
    }
</script>

<style scoped>
  .personalHome-top-box{
    height: 150px;
    width: 1150px;
    transition: 0.3s;
    margin: 20px auto;
    border-radius: 3px;
    /*background: url(../../assets/images/user/head-back/0.png) no-repeat;*/
    /*background-size:100% 100%;*/
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 999;
    letter-spacing: 1px;
  }
  .personalHome-top{
    width: 1150px;
    height: 150px;
    margin: 0px auto;
    transition: 0.3s;
    overflow: hidden;
    position: relative;
  }
  .headContentBox{
    width: 1150px;
    height: 95px;
    position: absolute;
    bottom: 0px;
  }
  .changeBackImg{
    width: 100px;
    height: 34px;
    position: absolute;
    top: -30px;
    right: 30px;
    transition: 0.3s;
    background-color: rgba(255, 255, 255,0.4);
    border-radius: 3px;
    z-index: 1;
  }
  .changeBackImg a div{
    float: left;
    width: 35px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    margin-left: 11px;
    transition: 0.4s;
    border-radius: 50px;
  }
  .changeBackImg a div i{
    font-size: 22px;
    color: rgb(63, 63, 63);
    font-weight: bolder;
  }
  .changeBackImg a div i:hover{
    color: rgb(41, 41, 41);
  }
  .personalHome-top-left{
    width: 800px;
    height: 95px;
  }
  .personalHome-top-left-replace{
    float: left;
    background-color: #4a4a4a;
    width: 70px;
    height: 70px;
    margin-top: 15px;
    margin-left: 20px;
    border-radius: 50%;
  }
  .personalHome-top-left-iocn{
    display: block;
    float: left;
    /*margin-top: 15px;*/
    /*margin-left: 20px;*/
    border-radius: 50%;
  }
  .personalHome-top-left-descr{
    float: left;
    margin-left: 12px;
    width: 600px;
    height: 100px;
  }
  .personalHome-top-left-descr div{
    /* 处理文字溢出 */
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .personalHome-top-left-descr div:nth-child(1){
    height: 60%;
    line-height: 90px;
    font-size: 20px;
    color: rgb(246, 246, 246);
    letter-spacing:1px;
  }
  .personalHome-top-left-descr div:nth-child(2){
    height: 20%;
    line-height: 20px;
    color: rgb(238, 238, 238);
    font-size: 12.5px;
    letter-spacing:2px;
  }
  .personalHome-top-right{
    width: 350px;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 800px;
  }
  .personalHome-top-right-guanzhu,.personalHome-top-right-sixin{
    float: left;
    width: 100px;
    height: 35px;
    margin-top: 50px;
    border-radius: 3px;
    color: rgb(245, 245, 245);
    font-size: 15px;
    text-align: center;
    line-height: 35px;
    transition: 0.2s;
    letter-spacing:1px;
  }
  .personalHome-top-right-guanzhu{
    margin-left: 105px;
    background-color: rgb(216, 88, 28);
  }
  .personalHome-top-right-sixin{
    margin-left: 15px;
    background-color: rgb(92, 172, 0);
  }
  .personalHome-top-right-guanzhu:hover,.personalHome-top-right-sixin:hover{
    background-color: rgb(58, 58, 58);
  }
  .personalHome-top-right-guanzhu:active,.personalHome-top-right-sixin:active{
    background-color: rgb(77, 77, 77);
  }
</style>
